<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>promise重写</title>
  </head>
  <body>
    <script>
      //视频网址：https://www.bilibili.com/video/BV1XX4y1w7aR?p=2
      //https://www.bilibili.com/video/BV1Qh411h7rr?from=search&seid=14250124189018118757&spm_id_from=333.337.0.0
      class MyPromise {
        constructor(executor) {
          this.state = "pending";
          this.value = undefined;
          this.error = undefined;
          //处理MyPromise中setTimeout异步
          this.onResolvedCallback = [];
          this.onRejectedCallback = [];

          //成功函数
          let resolve = (value) => {
            if (this.state === "pending") {
              this.state = "fulfilled";
              this.value = value;
              this.onResolvedCallback.forEach((fn) => fn());
            }
          };

          //失败函数
          let reject = (error) => {
            if (this.state === "pending") {
              this.state = "rejected";
              this.error = error;
              this.onRejectedCallback.forEach((fn = fn()));
            }
          };

          //添加try...catch是为了让抛出异常错误
          try {
            //执行器
            executor(resolve, reject);
          } catch (error) {
            reject(error);
          }

          // executor(resolve, reject);
        }

        //then里面有两个回调函数
        then = (onFulFilled, onRejected) => {
          let x;
          return new Promise((resolve, reject) => {
            if (this.state === "fulfilled") {
              // onFulFilled(this.value);
              try {
                x = onFulFilled(this.value);
                resolve(x);
              } catch (e) {
                reject(e);
              }
            }

            if (this.state === "rejected") {
              // onRejected(this.error);
              try {
                x = onRejected(this.error);
                resolve(x);
              } catch (e) {
                reject(e);
              }
            }

            if (this.state === "pending") {
              this.onResolvedCallback.push(() => {
                // onFulFilled(this.value);
                try {
                  x = onFulFilled(this.value);
                  resolve(x);
                } catch (e) {
                  reject(e);
                }
              });

              this.onRejectedCallback.push(() => {
                // onRejected(this.error);
                try {
                  x = onRejected(this.error);
                  resolve(x);
                } catch (e) {
                  reject(e);
                }
              });
            }
          });
        };
      }

      new MyPromise((resolve, rejected) => {
        //分同步和异步,若是异步需要onResolvedCallback和onRejectedCallback处理
        // 同步
        // console.log(1);
        // resolve(10);

        //异步
        setTimeout(() => {
          console.log(1);
          resolve(10);
        });
      })
        .then(
          (value) => {
            console.log(value + 2);
            return value + 2;
          },
          (error) => {
            return error;
          }
        )
        .then(
          (value) => {
            console.log(value + 3);
          },
          (error) => {
            console.log(error);
          }
        );
    </script>
  </body>
</html>
